﻿import QtQuick 2.12
import QtQuick.Layouts 1.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.12
import "../components/"
Rectangle {

    id: root

    property int showDetails: 0     // 0缩略图 1 半个图 2 一个图
    property int  changeType: 0   // 0自动 1手动


    color: Qt.rgba(233/255, 230/255, 224/255, 1)

    // 切换按钮
    property real buttonH: 34*dp
    property real buttonW: 90*dp
    property real chartY: layout_rect.y
    Rectangle{
        id: button_settings
//        x: parent.width*0.97-buttonW
//        y: largeMode ? 40*dp : 20*dp
        x: layout_rect.x + layout_rect.width - width
        y: layout_rect.y - height - 12*dp
        height: buttonH
        width: buttonW
        radius: 3*dp
        border.color: "#CCCCCC"
        Rectangle{
            height: buttonH; width: buttonH
            radius: 3*dp
            border.color: "#CCCCCC"
            property bool isHovered: false
            color: isHovered ? "#f1A011" : Qt.rgba(245/255, 166/255, 28/255, 1)
            Image{
                source: "qrc:/picture/tabChromatogram.png"
                anchors.centerIn: parent
                height: 15*dp; width: 15*dp
            }
            MouseArea{
                anchors.fill: parent
                cursorShape: "PointingHandCursor"
                hoverEnabled: true
                onEntered: { parent.isHovered = true }
                onExited: { parent.isHovered = false }
                onClicked: {
                    boxCCS.show()
                }
            }
            CustomTooltip{
                visible: parent.isHovered
                text: "配置"
            }
        }Rectangle{
            border.color: isHovered ? "#1677FF" : "transparent"
            color: isHovered ? "#ecf5ff" : "transparent"
            radius: 3*dp
            x: buttonH; width: parent.width - x; height: parent.height
            property bool isHovered: false
            Text{
                text: changeType===0 ? "自动" : "手动"
                font.pixelSize: config.fontsize
                anchors.centerIn: parent
                color: parent.isHovered ? "#1677FF" : "#444"
                opacity: 0.9
            }
            MouseArea{
                anchors.fill: parent
                cursorShape: "PointingHandCursor"
                hoverEnabled: true
                onEntered: { parent.isHovered = true }
                onExited: { parent.isHovered = false }
                onClicked: {
                    CChromManager.setDetectMode(changeType === 0)
                    console.log(CChromManager.getDetectMode()["IsAuto"])
                    changeType = CChromManager.getDetectMode()["IsAuto"]
                }
            }
            CustomTooltip{
                visible: parent.isHovered
                text: "手动/自动切换"
            }
        }

    }

    //    Rectangle{
    //        x: parent.width*0.97-buttonW
    //        y: parent.height*0.05
    //        border.color: "#B8B7B5"
    //        color: "#F0F0F0"
    //        height: buttonH
    //        width: buttonW
    //        radius: buttonH/2
    //        Rectangle{
    //            color: Qt.rgba(245/255, 166/255, 28/255, 1)
    //            width: buttonW * 0.52; height: buttonH-4*dp
    //            x: changeType===0 ? 2*dp : buttonW-width-2*dp; y: 2*dp
    //            radius: buttonH/2
    //        }
    //        Item{
    //            height: buttonH; width: buttonW*0.52
    //            Text{
    //                text: "自动"
    //                color: changeType===0 ? "white" : "#444444"
    //                anchors.centerIn: parent
    //                font.pixelSize: config.fontsize-2*dp
    //            }
    //            MouseArea{
    //                anchors.fill: parent
    //                cursorShape: Qt.PointingHandCursor
    //                onReleased: {
    //                    changeType = 0
    //                    boxCCS.show()
    //                }
    //            }
    //        }
    //        Item{
    //            height: buttonH; width: buttonW*0.52; x: buttonW*0.48
    //            Text{
    //                text: "手动"
    //                color: changeType===1 ? "white" : "#444444"
    //                anchors.centerIn: parent
    //                font.pixelSize: config.fontsize-2*dp
    //            }
    //            MouseArea{
    //                anchors.fill: parent
    //                cursorShape: Qt.PointingHandCursor
    //                onReleased: {
    //                    changeType = 1
    //                    boxCCS.show()
    //                }
    //            }
    //        }
    //    }
    BoxChromatogramCollectSettings{
        id: boxCCS
    }

    Component.onCompleted: {
        chart.refreshData()
    }

    // 图
    Rectangle{      // 背景白板
        id: layout_rect
        radius: 5*dp
        height: parent.height - 110*dp
        width: parent.width - 60*dp
        x: 30*dp; y: Math.min(0.1*parent.height+30*dp, 80*dp)
    }
    clip: true
    property int minutePointCount: 60   // 一分钟包含了多少个采样点（暂定每秒1个）
    ScrollView{
        id: chart_layout
        property real paddings: 24*dp
        x: 30*dp + paddings; y: Math.min(0.1*parent.height+30*dp, 80*dp) + paddings
        height: parent.height - 110*dp - 2*paddings
        width: parent.width - 60*dp - 2*paddings
        contentWidth: chart.width
        CustomChart{
            id: chart
            maxY: 800
            cChartInterface: CChromChart
            height: parent.height
            width: Math.max(root.width - 60*dp - 2*chart_layout.paddings, tickCountX * 40*dp)
            xTitle: "时间(min)"
            yTitle: "信号(mAU)"
            margin: 0
            onWidthChanged: {
                parent.contentX = width - parent.width
            }
        }
        // 放阈值线的地方
        Item{
            id: layout_thr
            visible: changeType===0
            height: chart.height - chart.topMargin - chart.bottomMargin
            width: chart.width - chart.leftMargin - chart.rightMargin
            x: chart.x + chart.leftMargin
            y: chart.y + chart.topMargin

            ChartThrLine{
                id: thr0
                title: "阈值: " + posiThr.toFixed(2)
                color: "orange"
                y: (1-(posiThr-yBot)/(yTop-yBot)) * parent.height
                onHold: curThr === 0
            }

            MouseArea{
                anchors.fill: parent
                cursorShape: curThr===-1 ? Qt.ArrowCursor : Qt.PointingHandCursor
                hoverEnabled: true
                onPressed: {
                    if(curThr !== -1){
                        onThrPressed = true
                        pressedThr = curThr
                    }
                }onPositionChanged: {
                    let mousePos = mapToItem(this, mouseX, mouseY)

                    if(onThrPressed){
                        mousePos.y = Math.max(mousePos.y, 0)
                        mousePos.y = Math.min(mousePos.y, layout_thr.height)
                        if(pressedThr == 0){
    //                        thr0.y = mousePos.y
                            posiThr = ((layout_thr.height-mousePos.y)/layout_thr.height) * (yTop-yBot) + yBot
                            posiThr = posiThr.toFixed(2)
                        }
                    }else{
                        curThr = getThrIdx(mousePos)
                    }

                }onReleased: {
                    CChromManager.setThreshold(posiThr)
                    onThrPressed = false
                    if(pressedThr == 0){
                    }
                    pressedThr = -1
                }
            }

        }
    }
    Rectangle{          // 猜猜这是干嘛的
        y: chart_layout.y - 10*dp
        width: 30*dp; height: parent.height - y
        color: "#E9E6E0"
//        color: "yellow"
    }
    Rectangle{
        y: chart_layout.y - 10*dp
        width: 30*dp; height: parent.height - y
        x: parent.width - width
        color: "#E9E6E0"
//        color: "red"
    }

    property real yTop: chart.maxY   // 图表显示范围
    property real yBot: chart.minY
    property real posiThr: 300           // 阈值线
    property int curThr: -1
    property var onThrPressed: false
    property var pressedThr: -1
    onPosiThrChanged: {
    }

    function getThrIdx(mousePos){

        let minDis = layout_thr.height / 100
        let idx = -1
        if(Math.abs(thr0.y - mousePos.y) < minDis){
            idx = 0
            minDis = Math.abs(thr0.y - mousePos.y)
        }
        return idx
    }

    Connections{
        target: CChromManager
        onSigStartCollect: {
            mainwindow.showToast("开始收集", 0)
        }onSigEndCollect: {
            mainwindow.showToast("结束收集", 0)
        }
    }


    // 表
//    Rectangle{
//        radius: 5*dp
//        visible: showDetails
//        height: 120*dp; width: parent.width - 0.06*parent.width
//        y: parent.height*0.95-height; x: 0.03*parent.width
//        Item{
//            y: 30*dp
//            height: 40*dp; width: parent.width
//            Row{
//                height: 40*dp; width: parent.width-40*dp
//                x: 60*dp
//                spacing: width / 7
//                Text{ text: "死时间";   height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "保留时间";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "调整时间";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "峰最大值";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "峰高";     height: 40*dp; width: 1;   font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "峰宽";     height: 40*dp; width: 1;   font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "对称性";   height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//            }
//        }Item{
//            y: 70*dp
//            height: 50*dp; width: parent.width
//            Row{
//                height: 40*dp; width: parent.width-40*dp
//                x: 70*dp
//                spacing: width / 7
//                Text{ text: "12";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "313";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "847";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "328";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "9";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "4";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//                Text{ text: "73";  height: 40*dp; width: 1; font.pixelSize: config.fontsize; color: "#666666"}
//            }
//        }
//        Rectangle{
//            height: 1; width: parent.width-40*dp; color: "#DFDFDF"; y: 20*dp; x: 20*dp
//        }Rectangle{
//            height: 1; width: parent.width-40*dp; color: "#DFDFDF"; y: 60*dp; x: 20*dp
//        }Rectangle{
//            height: 1; width: parent.width-40*dp; color: "#DFDFDF"; y: 100*dp; x: 20*dp
//        }
//    }


}
